<template>
    <div>
        <h2>我是用户界面</h2>
        <p>我是用户界面，哈哈哈</p>
        <h2>{{message}}</h2>
        <h2>{{userId}}</h2>
         <h2>{{$route.params.userId}}</h2>
         <button @click="btnClick">按钮</button>
    </div>
</template>

<script>

export default {
    name:"User",
    data(){
        return {
            message:'aaa'
        }
    },
     created() {
        console.log(' User created');
    },
    destroyed() {
         console.log(' User destroyed');
    },
    // created(){
    //     console.log('created');
    //     document.title = '用户'
    // },
    computed:{
        userId() {
            // 当前那个路由属于活跃状态下就属于那个路由对象
            // params   参数
            return this.$route.params.userId
        },
        finalMessage(){
            return this.message
        }
    },
    methods:{
        btnClick(){
            // 所有的组建都继承自vue类的原型
            console.log(this.$router)
            console.log(this.$route)
            //   this.test();
            console.log(this.name)
        }
    }
}
</script>

<style scoped>

</style>
